<script lang="ts" setup>
import { setBackgroundSetting } from '@/api/AccountSettingApi.ts'
import { type BackgroundSetting, newBackgroundSetting } from '@/api/types/Setting.ts'
import { useBackgroundSettingStore } from '@/config/store/UseBackgroundSettingStore.ts'
import CommonBackgroundSettingFormItems from '@/page/Setting/component/CommonBackgroundSettingFormItems.vue'
import type { ArcoForm, ArcoFormRules } from '@/tool/ArcoFormTool.ts'
import { debounce } from '@/tool/FunctionTool.ts'
import { ref } from 'vue'


const settingStore = useBackgroundSettingStore()

const formRef = ref<ArcoForm | null>()
const formData = ref<BackgroundSetting>(settingStore.setting ?? newBackgroundSetting())
const formRule: ArcoFormRules<BackgroundSetting> = {}

const onSettingChange = () => {
    settingStore.setValue(formData.value)
    setBackgroundSetting(formData.value)
            .then(() => console.debug('已保存', new Date().toISOString()))
}
const debounceOnSettingChange = debounce(onSettingChange, 500)

</script>

<template>
<a-form
        ref="formRef"
        :model="formData"
        :rules="formRule"
        auto-label-width
        class="background-setting-form"
        scroll-to-first-error
>
    <CommonBackgroundSettingFormItems
            :form-data="formData"
            @change="debounceOnSettingChange"
    />
</a-form>
</template>

<style lang="scss" scoped>
.background-setting-form {
    max-width: 1200px;
}
</style>
